<template>
	<div id="Classification" class="Classification" v-loading.fullscreen.lock="loading" element-loading-text="请喝杯咖啡稍等一下,正在加载中"
	 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" type="flex" align="top">
		<el-row :gutter="20" class="row-bg" justify="center" >
			<el-col :span="24">
				<el-col>					
						<div class="article-div-style" v-for="articleItem in articleListData" :key="articleItem.article_id" @click="openSearch(articleItem)">
							<div class="icon-div">
									<img src="../../assets/img/icon/book12.jpg" v-if="articleItem.link_to==null||articleItem.link_to==''" class="icon-img" />
									<img :src="articleItem.link_to" v-else class="icon-img" />
							</div>
							<div class="artcle-wenben">
								<a>
									<span class="titleStyle"> <b>{{articleItem.title}}</b></span>
								</a>
								<div class="text">
									<div class="articleTextStyle">
										{{articleItem.summary}}
									</div>
									<div class="buttum_footer">
										<span>
											<span style="margin-right: 0.325rem;">{{articleItem.view_count}}</span><i class="el-icon-view"></i>
											<i class="el-icon-time" style="margin-left: 10px;margin-right:1.25rem;">{{articleItem.create_time| formatDate}}</i>
											<template v-for='item in articleItem.meta_keywords.split(",")'>
												<el-tag type="info" style="margin-left: 0.325rem;">{{item}}</el-tag>
											</template>
										</span>
					
										<div style="float: right; ">
											<a style="margin-right: 5px;" @click="openSearch(articleItem)">浏览...</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					<el-footer>
						<div class="pagination">
							<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total_page"
							 :size="rows_page">
							</el-pagination>
						</div>
					</el-footer>
				</el-col>
			</el-col>
			<el-col :span="19" v-if="editVisible===1">
				<div class="plugins-tips">
					<div style="text-align: left;float:left">
						<span class="el-icon-d-arrow-left" @click="detialtoList(0)">返回</span>
					</div>
					<div style="text-align: center">
						{{this.cur_item.title}}
					</div>
				</div>
				<div class=" ql-snow">
					<div class="ql-editor" v-html='this.cur_item.article_content'></div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		// Quill
	} from 'vue-quill-editor';
	import * as Quill from 'quill' //引入编辑器
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	export default {
		name: 'Classification',
		data() {
			return {
				url: {
					get_article_list: constHelp['WEBAPIURL'] + '/blogManage/get_article_list',
					// 获取文章类型
					get_article_category_all_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_list',

				},
				articleListData: [],
				article_categoryOptions: [],
				editVisible: 0, //菜单编辑框
				// 删除用
				cur_page: 1, //当前页
				rows_page: 10, // 一页多少条
				total_page: 0,
				cur_item: {},
				loading: true,
				category_item: {},
			};
		},
		//初期化页面
		created() {
			
			this.get_article_list()
		},
		filters: {
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			},
			formatContent(val) {
				return val;
			}
		},
		// 监听
		computed: {},
		methods: {
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.get_article_list();
			},
			article_category_Click(item) {
				this.category_item = item;
				this.get_article_list();
			},
			// 获取用户文章列表
			get_article_list() {
				this.$axios.post(this.url.get_article_list,{
					page_index: this.cur_page,
					page_size: this.rows_page,
					selectWord: this.select_word,
					article_model: "1",
					article_category_id:  this.$route.query.article_category_id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.articleListData = res.data.data;
						this.total_page = res.data.total
						this.loading = false
					}
				})
			},
			openSearch(item) {
				let routeUrl = this.$router.resolve({
					path: '/ArticleDetail',
					name: 'ArticleDetail',
					query:  {
						"article_id": item.article_id
					}
				});
				window.open(routeUrl.href, '_blank');
				// this.editVisible = 1;
				// this.cur_item = item;
			},
			detialtoList(visitflage) {
				this.editVisible = visitflage;
			},
		},
	};
</script>

<style>
	.Classification {
		min-height: 100px;
		min-width: 100%;
	}

	.text {
		color: #999999;
		font-size: 11px;
	}

	.titleStyle {
		font-size: 14px;
	}

	.article-div-style {
		margin: auto auto 1.5rem auto;
		border-bottom: 0.01rem solid #EBEEF5;
		padding: 10px 20px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		transition: All 0.4s ease-in-out;
		-webkit-transition: All 0.4s ease-in-out;
		-moz-transition: All 0.4s ease-in-out;
		-o-transition: All 0.4s ease-in-out;
	}

	.article-div-style:hover {
		box-shadow: 2px 5px 6px #EBEEF5;
		/* 		transform: scale(0.2);
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05); */
	}

	.Classification .sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 70px;
		bottom: 0;
		overflow-y: scroll;
	}

	.Classification .sidebar::-webkit-scrollbar {
		width: 0;
	}

	.Classification .sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.Classification .sidebar>ul {
		height: 100%;
	}

	.classStyle {
		padding: 0;
		background-color: #324157;
	}
	
	/* 图片div */
	.icon-div {
		min-height: 5rem;
		min-width: 5rem;
		position: absolute;
	}
	
	.icon-img {
		height: 4rem;
		width: 4rem;
		/* border: 0.0625rem solid #666666; */
	}
	
	.artcle-wenben {
		padding-left: 7rem;
		padding-top: 0.1rem;
	}
</style>
